<template>
	<view class="container bg-white">
		<block v-if='status==1'>
			<view class="register">{{title}}</view>
			<view class="content">
				<view class="phone">
					<input placeholder-class='plac' v-model="phone" type="number" value="" class="text-13 flex-treble"
						placeholder="请输入手机号码" />
					<image v-if='phone' src="../../static/close2.png" @click="clear()"></image>
				</view>
				<view class="code" @click="getCode">获取验证码</view>
			</view>
		</block>
		<block v-else>
			<codeVerify @verify='verify' :verifyTip='verifyTip' :phone='phone' :isShow="isShow" @reGet='reGet'>
			</codeVerify>
		</block>

	</view>
</template>

<script>
	import codeVerify from '@/components/code-verify.vue'
	export default {
		data() {
			return {
				phone: '',
				status: 1,
				timer: null,
				verifyTip: 60,
				isShow: true,
				code: "",
				title: '',
				type: '',
				state:''
			}
		},
		components: {
			codeVerify
		},
		onLoad(options) {
			
			if (options.type) {
				this.title = '绑定手机号'
				this.type = options.type
			} else {
				this.title = '快速注册'
			}
			if(options.state){
				this.state = options.state
			}
			console.log(this.type)
		},
		beforeDestroy() {
			if (this.timer) {
				clearInterval(this.timer)
				this.timer = null
			}
		},

		methods: {
			clear() {
				console.log(111)
				this.phone = ''
			},
			timedown(num) {
				console.log(num)
				let that = this;
				if (num == 0) {
					that.isShow = false;
					return clearTimeout();
				} else {
					that.isShow = true;
					this.timer = setTimeout(function() {
						that.verifyTip = num - 1
						that.timedown(num - 1);
					}, 1000);
				}
			},
			async getCode() {
				if (this.phone) {
					const data = {
						mobile: this.phone,
						codeType: 1
					}
					const [err, rs] = await this.$post(this.$api.sendCode, data)
					console.log(rs)
					if (rs) {
						this.$util.msg(rs.message)
						this.status = 2
						this.timedown(this.verifyTip)
					}


				} else {
					this.$util.msg('请输入手机号')
				}
			},
			reGet() {
				this.verifyTip = 60
				this.getCode()

			},
			
			async verify(data) {
				this.code = data.code
				const that =this
				data['codeType'] = 1
				const [err, rs] = await this.$post(this.$api.verifyCode, data)
				console.log(rs)
				if (rs) {
					if (this.type == 2) {
                        console.log(this.phone)
						console.log(uni.getStorageSync('userId'))
						const data ={mobile:this.phone,userId:uni.getStorageSync('userId')}
						const [err, rs] = await this.$post(this.$api.updateUserMobile, data)
						console.log(err,rs)
						if(rs){
							this.$util.msg(rs.message)
							setTimeout(()=>{
								if(that.state){
									uni.redirectTo({
										url:'/pagesA/pages/upLoginPwd/upLoginPwd'
									})
								}else{
									uni.switchTab({
										url:'/pages/home/home'
									})	
								}
							  
							},1500)
						}

					} else {
						   uni.navigateTo({
							url: '/pages/forgetPwd/forgetPwd?code=3&phone=' + this.phone + '&pcode=' + this
								.code +
								'&type=1'
						})
					}

				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.container {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;

		.register {
			padding-top: 97rpx;
			font-size: 54rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #181818;
			padding-left: 67rpx;
		}
	}

	.content {
		padding-left: 63rpx;
		padding-right: 66rpx;
		margin-top: 123rpx;
	}

	.phone {
		padding-bottom: 24rpx;
		border-bottom: 2rpx solid #ED7200;
		display: flex;
		justify-content: space-between;

		image {
			width: 32rpx;
			height: 32rpx;
		}

		input {
			font-weight: bold;
			color: #181818;
			background: transparent;
			font-size: 34rpx;
		}


	}

	.plac {
		font-weight: normal;
		color: #D9D9D9;
	}

	.code {
		margin-top: 118rpx;
		height: 94rpx;
		background: #ED7200;
		border-radius: 45rpx;
		text-align: center;
		line-height: 94rpx;
		color: #FFFFFF;
		font-size: 32rpx;
	}
</style>
